<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-08-26 17:51:52
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-10 16:55:48
 * @FilePath: /XMate-h5/src/views/customer/customerDetail/components/customerAttend/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="head-view">
      <div>共{{ dataList?.length }}个客户参会人</div>
    </div>
    <customLoading v-if="isLoading" />
    <div v-else>
      <van-empty description="暂无内容" v-if="!dataList.length" />
      <template v-else>
        <div class="list-view">
          <customerAttend
            class="cell"
            v-for="(item, index) of dataList"
            :key="index"
            :item="item"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import customerAttend from "./customerAttend.vue";
import { useCustomerStore, useBusinessStore } from "@/store";
import { computed, onMounted, ref, defineProps } from "vue";
import customLoading from "../customLoading.vue";
import datePicker from "@/components/datePicker/index.vue";
import { isPC } from "@/utils/platformTool";

const props = defineProps({
  isCustomer: {
    type: Boolean,
    default: true,
  },
});
const isLoading = ref(false);
const store = useCustomerStore();
const businessStore = useBusinessStore();

async function getData(startTime, endTime) {
  isLoading.value = true;
  if (props.isCustomer) {
    await store.getCustomerAttendeeAction(startTime, endTime);
  } else {
    await businessStore.getOpportunityAttendeeAction(startTime, endTime);
  }
  isLoading.value = false;
}

const dateRange = store.getDefaultDateRange();
const startDate = ref(dateRange.st);
const endDate = ref(dateRange.et);

function onSearch() {
  getData(startDate.value, endDate.value);
}

onMounted(() => {
  const dateRange = store.getDefaultDateRange();
  getData(dateRange.st, dateRange.et);
});

const dataList = computed(() => {
  return props.isCustomer
    ? store.customerAttendeeList
    : businessStore.customerAttendeeList;
});
</script>

<style lang="less" scoped>
.container {
  padding: 15px;

  .head-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    color: #595959;
    line-height: 22px;

    img {
      width: 16px;
    }
  }

  .list-view {
    margin-top: 20px;
  }

  .cell {
    margin-bottom: 10px;
  }
}
</style>
